<template>
  <div class="prizeRecords">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      class="list-wrap"
    >
      <div class="records-item" v-for="(item,index) in dataList" :key="index">
        <div class="item-left">
          <div class="info van-ellipsis">奖品信息：{{item.content}}</div>
          <div class="time">中奖时间：{{item.time}}</div>
        </div>
        <div class="btn">查看详情</div>
      </div>
      <div slot="loading" class="f-tac loading more">
        <img src="@assets/img/icon-loading.png" />
        加载中...
      </div>
      <div  slot="finished" class="f-tac loading more">你太厉害了，坚持到底了~</div>
    </van-list>
  </div>
</template>

<script>
import footerTab from "@components/footerTab.vue";
import { mapActions, mapGetters, mapMutations } from "vuex";  //vuex得各个方法   mapGetters放在computed里面 之后可以在当前页面用 this.userInfo 使用这个全局变量
export default {
  name: "prizeRecords",
  data() {
    return{
      dataList:[
        {
          content:'面部护理优惠券',
          time:'2021/08/01 12:44',
        },
        {
          content:'身体护理优惠券',
          time:'2021/08/04 23:28',
        },
        {
          content:'身体护理八折体验券',
          time:'2021/08/08 09:30',
        },
        {
          content:'面部护理优惠券',
          time:'2021/08/01 12:44',
        },
        {
          content:'身体护理优惠券',
          time:'2021/08/04 23:28',
        },
        {
          content:'身体护理八折体验券',
          time:'2021/08/08 09:30',
        },
        {
          content:'面部护理优惠券',
          time:'2021/08/01 12:44',
        },
        {
          content:'身体护理优惠券',
          time:'2021/08/04 23:28',
        },
        {
          content:'身体护理八折体验券',
          time:'2021/08/08 09:30',
        }
      ],
      loading: false, //消息列表加载状态
      finished: false, //消息列表是否完成状态
      pageIndex: 0,
      pageSize: 20,
    }
  },
  components: {
    footerTab
  },
  methods: {
    ...mapMutations({               //set 设置vuex变量得值  也可以用this.$store.commit('setToken','as')  这样设置 setToken需在store/index.js mutations里得定义
      setUserInfo: "setUserInfo",   //设置用户信息
    }),
    getData(){
      setTimeout(() => {
        this.dataList=[...this.dataList,...this.dataList];
        this.loading=false;
        if(this.dataList.length>40){
          this.finished=true;
        }
      }, 1000);
    },
    onLoad(){
      if (this.finished ) return;
      this.pageIndex += 1;
      this.getData()
    }
  },
};
</script>

<style lang="scss" scoped>
.prizeRecords{
  padding: 0.3rem;
  min-height: 100vh;
  background: #f2f2f2;
  .list-wrap{
    .records-item{
      padding: 0.3rem;
      background-color: #fff;
      box-shadow: 0 0 0.1rem 0 rgb(0 0 0 / 20%);
      border-radius: 0.05rem;
      display: flex;
      margin-bottom: 0.3rem;
      align-items: center;
      .item-left{
        flex: 1;
        overflow: hidden;
        font-size: 0.26rem;
        .time{
          margin-top: 0.2rem;
          color: #666;
        }
      }
      .btn{
        margin-left: 0.1rem;
        height: 0.48rem;
        padding: 0 0.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.05rem;
        background: #2d8cf0;
        color: #fff;
        font-size: 0.24rem;
        flex: none;
      }
    }
  }
}
</style>